<template>
    <div class="registerContainer">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordAgin">
                <el-input type="password" v-model.number="ruleForm.passwordAgin"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model.number="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verifyCode">
                <el-input style="width:204px;" v-model.number="ruleForm.verifyCode"></el-input>
                <el-button size="mini" type="success" @click="getverifyCode">获取验证码</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
// import { isNumber } from "util";
export default {
    data() {
        let chectUsername = (rule, value, callback) => {
            if (value.length < 4) {
                callback(new Error("用户名必须为4-16任意字符!"));
            } else if (value.length > 16) {
                callback(new Error("用户名必须为4-16任意字符!"));
            } else {
                callback();
            }
        };
        let checkPaaword = (rule, value, callback) => {
            if (value.length < 8) {
                callback(new Error("密码必须为8-16位非纯数字字符!"));
            } else if (value.length > 16) {
                callback(new Error("密码必须为8-16位非纯数字字符!"));
            } else if (!isNaN(value)) {
                callback(new Error("密码必须为8-16位非纯数字字符!"));
            } else {
                callback();
            }
        };
        let checkPasswordAgin = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码!"));
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        let checkphone = (rule, value, callback) => {
            let phoneReg = /^1[3-578]\d{9}$/;
            if (phoneReg.test(value)) {
                callback();
            } else {
                callback(new Error("请输入合法境内手机号码!"));
            }
        };
        let charckverifyCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: "",
                password: "",
                passwordAgin: "",
                phone: "",
                verifyCode: ""
            },
            rules: {
                username: [{ validator: chectUsername, trigger: "blur" }],
                password: [{ validator: checkPaaword, trigger: "blur" }],
                passwordAgin: [
                    { validator: checkPasswordAgin, trigger: "blur" }
                ],
                phone: [{ validator: checkphone, trigger: "blur" }],
                verifyCode: [{ validator: charckverifyCode, trigger: "blur" }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 验证数据可用
                    let userInfos = {
                        username: this.ruleForm.username,
                        password: this.ruleForm.password,
                        mobile: this.ruleForm.phone
                    };
                    this.$ajax
                        .post("user/", userInfos)
                        .then(res => {
                            if (res.status == 201) {
                                this.$notify({
                                    message: "注册成功！",
                                    type: "success"
                                });
                            }
                            let data = {username:this.ruleForm.username,password:this.ruleForm.password}
                            this.logins(data)
                        })
                        .catch(err => {
                            console.log("error post!!");
                        });
                } else {
                    // 验证数据不可用
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 获取验证码
        getverifyCode() {
            this.$notify({
                title:"暂时不用验证码",
                message: "短信额度已用完，暂时不用验证码，随意输入即可",
                type: "success"
            });
        },
        logins(data) {
            // 账户密码登录
            this.$ajax
                .post("login/", data)
                .then(res => {
                    if (res.status == 200) {
                        window.localStorage.setItem("token", res.data.token);
                        this.getUserInfos();
                        this.getUserFavList();
                        this.getUserShopcar();
                        this.getUserOrder();
                        this.$router.push("home");
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.detail == 400) {
                        this.$notify({
                            message: "用户名获取密码不正确！",
                            type: "warning"
                        });
                    }
                });
        },
        // 进入页面就尝试获取用户信息存储在store里面---在登录页面也要进行此操作
        getUserInfos() {
            let mytoken = window.localStorage.getItem("token", "");
            if (mytoken === "") {
            } else {
                this.$ajax.get("user/").then(res => {
                    //.log(res.data);
                    this.$store.commit("updateUserInfos", res.data);
                });
            }
        },
        getUserFavList() {
            this.$ajax.get("fav/").then(res => {
                this.$store.commit("updateUserFavList", res.data.results);
            });
        },
        getUserShopcar() {
            this.$ajax.get("shopcar/").then(res => {
                this.$store.commit("updateShopcar", res.data.results);
            });
        },
        getUserOrder() {
            this.$ajax.get("order/").then(res => {
                this.$store.commit("updateUserOrderList", res.data.results);
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.registerContainer {
    width: 500px;
    margin: 10px auto;
}
.componengtsContainer {
    width: 500px;
}
</style>